<template>
  <div class="timeday">
    <div class="title-row">
      <div class="selectYear">
        <span class="custom-range">自定义排名区间:</span>
      </div>
      <div class="theTimeCon">
        <div class="timeChoose" @click="dataChooseFlag = true">
          <div class="time">{{startShow}}</div>
          <div class="grayCrow"></div>
        </div>
        <div class="range">
          至
        </div>
        <div class="timeChoose" @click="dataChooseFlag = true">

          <div class="time">{{endShow}}</div>
          <div class="grayCrow"></div>
        </div>
      </div>
    </div>
    <van-popup v-model="dataChooseFlag" position="bottom">
      <date-choose-num
        v-if="dataChooseFlag"
        :startDate="startShow"
        :endDate="endShow"
        @getDateObj="getDateObj"
        @closeX="dataChooseFlag = false"
      ></date-choose-num>
    </van-popup>
  </div>

</template>

<script>
  import {mapGetters} from 'vuex'
  import DateChooseNum from './DateChooseNum'
  export default {
    name: 'ChooseTimeDay',
    components: {
      DateChooseNum
    },
    data () {
      return {
        dataChooseFlag: false,
        startShow: '',
        endShow: ''
      }
    },
    computed: {
      ...mapGetters(['selectRange'])
    },
    mounted () {
      this.initDate()
    },
    watch: {
      selectRange: {
        handler () {
          this.initDate()
        },
        deep: true
      }
    },
    methods: {
      initDate () {
        this.startShow = this.selectRange.start
        this.endShow = this.selectRange.end
      },
      getDateObj (val) {
        this.startShow = val.startDate
        this.endShow = val.endDate
        this.show = val.show
        this.$emit('getDateObj', {
          startIndex: this.startShow,
          endIndex: this.endShow,
          show: this.show
        })
        this.dataChooseFlag = false
      }
    }
  }
</script>

<style lang="less" scoped>
  .timeday {
    .range {
      line-height: 0.6rem;
      margin: 0 0.1rem;
      color: #999999;
      font-weight: 400;
      font-size: 0.2rem
    }
    .theTimeCon {
      display: flex;
      .timeChoose {
        width: 0.88rem;
        display: flex;
        align-items: center;
        font-size: 0.26rem;
        color: #666666;
        padding: 0 0.12rem;
        background: #f7f7f7;
        border-radius: 0.12rem;
        border: 0.01rem solid #cbcbcb;
        justify-content: flex-end;

        .time {
          font-weight: 400;
          font-size: 0.24rem;
        }

        .grayCrow {
          margin-left: 0.08rem;
          width: 0;
          height: 0;
          border-right: 0.1rem solid transparent;
          border-left: 0.1rem solid transparent;
          border-top: 0.1rem solid #cccccc;
        }
      }
    }
  }

  .title-row {
    margin-top: 0;
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding: 0;

    .selectYear {
      display: flex;

      .custom-range {
        font-size: 0.28rem;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #333333;
        line-height: 0.42rem;
        margin-right: 0.24rem;
      }
      .select {
        margin: 0 0.09rem;
        font-size: 0.28rem;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #333333;
        line-height: 0.42rem;
        &.active {
          color: #4375C9;
        }
      }
    }

  }

</style>
